<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Edit carrier information</title>
  <!-- 引入样式文件 -->
  <link rel="stylesheet" href="../../static/css/common.css">
  <link rel="stylesheet" href="../../static/css/form.css">
  <link rel="stylesheet" href="../../static/css/carrierInfo.css">
  <link rel="stylesheet" type="text/css" href="../../static/layui/css/layui.css"/>
  <script type="text/javascript" src="../../static/layui/layui.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
</head>
<body>
<!-- 菜单栏 -->
<link rel="stylesheet" href="../../static/css/index.css">
<ul>
  <div th:each="item:${menuList}" class="display:inline-de">
    <li><a th:href="@{${item.path}}" th:text="${item.name}"></a></li>
  </div>
  <a th:href="@{/login}" style="float:right;font-size: 16px;margin: 17px;color: white;">> 登出</a>
</ul>
<div class="container">
  <div class="form-container-carriers">
    <h2 class="t">编辑承运商信息</h2>
    <form th:object="${carrier}" th:action="@{/carrier/updateCarrier}" method="post">
      <div class="form-row">
        <label for="name">承运商名称</label>
        <input type="text" id="name" name="name" th:field="*{name}" required>
      </div>
      <div class="form-row">
        <label for="address">地址</label>
        <input type="text" id="address" name="address" th:field="*{address}" required>
      </div>
      <div class="form-row">
        <label for="phone">联系方式</label>
        <input type="text" id="phone" name="phone" th:field="*{phone}" required>
      </div>
      <div class="form-row">
        <label for="unitPrice">运输单价</label>
        <input type="text" id="unitPrice" name="unitPrice" th:field="*{unitPrice}" required>
      </div>
      <button class="submit-button">Submit</button>
    </form>
  </div>
  <div class="table-container">
    <div class="border">
      <h2 class="t" style="margin: 0">司机
        <button test-active="addDriver">ADD</button>
      </h2>
      <table class="table table-bordered box-table carrier-table">
        <thead>
        <tr>
          <th>用户名</th>
          <th>司机名</th>
          <th>电话</th>
          <th>电子邮箱</th>
        </tr>
        </thead>
        <tbody>
        <!-- 使用th:each循环渲染后端传入的数据 -->
        <tr th:each="driver : ${carrier.drivers}">
          <td th:text="${driver.userName}"></td>
          <td th:text="${driver.realName}"></td>
          <td th:text="${driver.phone}"></td>
          <td th:text="${driver.email}"></td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="border">
      <h2 class="t" style="margin: 0">货车
        <button test-active="addTruck" >ADD</button>
      </h2>
      <table class="table table-bordered box-table carrier-table">
        <tr>
          <th>车牌号</th>
          <th>载重(DWT)</th>
          <th>状态</th>
          <th>信息</th>
        </tr>
        <tbody>
        <!-- 使用th:each循环渲染后端传入的数据 -->
        <tr th:each="truck : ${carrier.trucks}">
          <td th:text="${truck.number}"></td>
          <td th:text="${truck.weight}"></td>
          <td th:switch="${truck.state}">
            <span th:case="0">空闲</span>
            <span th:case="1">使用中</span>
          </td>
          <td th:text="${truck.info}"></td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>

</div>
<script>
  layui.use(function(){
    const layer = layui.layer
            , form = layui.form
            , util = layui.util
            , carrierId = [[${carrier.id}]];
    //触发事件
    util.on('test-active', {
      'addDriver': function(){
        layer.open({
          type: 1
          ,resize: false
          ,shadeClose: true
          ,area: '450px'
          ,title: '注册司机'
          ,content: ['<form class="layui-form layui-form-pane" style="margin: 15px;">'
            ,'<li class="layui-form-item">'
            ,'<label class="layui-form-label">用户名</label>'
            ,'<div class="layui-input-block">'
            ,'<input class="layui-input" th:value="${userName}" name="userName" required/>'
            ,'</div>'
            ,'</li>'
            ,'<li class="layui-form-item">'
            ,'<label class="layui-form-label">密码</label>'
            ,'<div class="layui-input-block">'
            ,'<input class="layui-input" th:value="${password}" name="password" required/>'
            ,'</div>'
            ,'</li>'
            ,'<li class="layui-form-item">'
            ,'<label class="layui-form-label">司机姓名</label>'
            ,'<div class="layui-input-block">'
            ,'<input class="layui-input" th:value="${realName}" name="realName" required/>'
            ,'</div>'
            ,'</li>'
            ,'<li class="layui-form-item">'
            ,'<label class="layui-form-label">电话</label>'
            ,'<div class="layui-input-block">'
            ,'<input class="layui-input" th:value="${phone}" name="phone"/>'
            ,'</div>'
            ,'</li>'
            ,'<li class="layui-form-item">'
            ,'<label class="layui-form-label">邮箱</label>'
            ,'<div class="layui-input-block">'
            ,'<input class="layui-input" th:value="${email}" name="email" required/>'
            ,'</div>'
            ,'</li>'
            ,'<li class="layui-form-item" style="text-align:center;">'
            ,'<button  lay-submit="" lay-filter="driver" class="layui-btn">submit</button>'
            ,'</li>'
            ,'</form>'].join('')
          ,success: function(layero, index){
            layero.find('.layui-layer-content').css('overflow', 'visible');
            form.render().on('submit(driver)', function(data){
              data.field.roleId = 4;
              data.field.carrierId = carrierId;
              $.ajax({
                type: "post",
                url: "/carrier/addDriver",
                data: data.field,
                success:function (result) {
                  window.parent.location.reload();
                  layer.closeAll();
                }
              });
              return false;
            });
          }
        });
      },
      'addTruck': function(){
        layer.open({
          type: 1
          ,resize: false
          ,shadeClose: true
          ,area: '300px'
          ,title: '增加货车'
          ,content: ['<form class="layui-form layui-form-pane" style="margin: 15px;">'
            ,'<li class="layui-form-item">'
            ,'<label class="layui-form-label">车牌号</label>'
            ,'<div class="layui-input-block">'
            ,'<input class="layui-input" th:value="${number}" name="number" required/>'
            ,'</div>'
            ,'</li>'
            ,'<li class="layui-form-item">'
            ,'<label class="layui-form-label">载重(DWT)</label>'
            ,'<div class="layui-input-block">'
            ,'<input class="layui-input" th:value="${weight}" name="weight" required/>'
            ,'</div>'
            ,'</li>'
            ,'<li class="layui-form-item">'
            ,'<label class="layui-form-label">信息</label>'
            ,'<div class="layui-input-block">'
            ,'<input class="layui-input" th:value="${info}" name="info" required/>'
            ,'</div>'
            ,'<li class="layui-form-item" style="text-align:center;">'
            ,'<button  lay-submit="" lay-filter="truck" class="layui-btn">submit</button>'
            ,'</li>'
            ,'</form>'].join('')
          ,success: function(layero, index){
            layero.find('.layui-layer-content').css('overflow', 'visible');
            form.render().on('submit(truck)', function(data){
              data.field.carrierId = carrierId;
              $.ajax({
                type: "post",
                url: "/carrier/addTruck",
                data: data.field,
                success:function (result) {
                  window.parent.location.reload();
                  layer.closeAll();
                }
              });
              return false;
            });
          }
        });
      }
    });
  });
</script>
</body>
</html>
